<template>
    <div class="box" ref="charts"></div>
</template>

<script setup lang="ts">
// 引入echarts
import * as echarts from 'echarts';
import { onMounted, ref ,watch} from 'vue'
//获取容器实例
let charts = ref()
let mycharts
// 封装一个函数：函数作用是返回mycharts配置项对象
const getOption = () => {
    return {
        xAxis: {
            type: 'category',
            show: false,
            // x轴两边不留白
            boundaryGap: false
        },
        yAxis: {
            show: false
        },
        series: {
            type: 'line',
            data: props.data,
            // 平滑曲线
            smooth: true,
            // 拐点样式
            itemStyle: {
                // 拐点透明度
                opacity: 0
            },
            // 区域填充
            areaStyle: {
                // 线性渐变
                color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: "yellow", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "orange", // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            }
        },
        // 调整图形图标的布局
        grid: {
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            show: true,
            // 图标底层的颜色
            backgroundColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: "yellow", // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: "skyblue", // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            }
        },
        // 提示组件
        tooltip: {
            show:true,
            trigger:'axis',
            // 限制展示区域在容器内
            confine:true
        }
    }
}
onMounted(() => {
    // 初始化实例
    mycharts = echarts.init(charts.value)
    // 设置配置项
    mycharts.setOption(getOption())
    // 绑定浏览器窗口变化的事件
    window.addEventListener('resize',()=>{
        mycharts.resize()
    })
})
// 接收父组件传递过来折线图数据
let props = defineProps(['data'])
// 监听父组件传递过来props数据变化
// 监听到props变化之后，重置图标配置项
watch(
    ()=>props.data,
    ()=>{
        mycharts.setOption(getOption())
    }
)

</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ccc;
}
</style>